﻿

<div class="col-md-12">
      <!-- BOX -->
      <div class="box border green">
          <div class="box-title">
              <h4><i class="fa fa-table"></i>Dynamic Data Tables</h4>
              <div class="tools hidden-xs">
                  <a href="#box-config" data-toggle="modal" class="config">
                      <i class="fa fa-cog"></i>
                  </a>
                  <a href="javascript:;" class="reload">
                      <i class="fa fa-refresh"></i>
                  </a>
                  <a href="javascript:;" class="collapse">
                      <i class="fa fa-chevron-up"></i>
                  </a>
                  <a href="javascript:;" class="remove">
                      <i class="fa fa-times"></i>
                  </a>
              </div>
          </div>
          <div class="box-body">
              <div id="datatable1_wrapper" class="dataTables_wrapper form-inline" role="grid">
                <div class="row">
                  <div class="col-sm-12">
                      <div class="pull-right">
                        <div id="datatable1_filter" class="dataTables_filter">
                            <button type="button" style="width:30px;height:30px;padding:3px" class="btn btn-warning addtr">+</button>
                            <label><input class="form-control input-sm" placeholder="Search" aria-controls="datatable1" type="text">
                            </label>
                        </div>
                      </div>
                      <div class="pull-left">
                        <div class="dataTables_length" id="datatable1_length">
                            <select class="form-control input-sm" aria-controls="datatable1" size="1" name="batch">
                            <option selected="selected" value="1">批量删除</option>
                            <option value="2">批量审核</option>
                            </select>
                            <button type="button" style="height:30px;line-height:15px" class="btn btn-success diff">提交
                            </button>
                        </div>
                      </div>
                  <div class="clearfix"></div>
                  </div>
              </div>
              <table aria-describedby="datatable1_info" id="datatable1" class="datatable table table-striped table-bordered table-hover dataTable" border="0" cellpadding="0" cellspacing="0">
                <thead>
                    <tr role="row">
                        <th aria-label="Rendering engine: activate to sort column descending" aria-sort="ascending" style="width:50px;" colspan="1" rowspan="1" aria-controls="datatable1" tabindex="0" role="columnheader" class="sorting_asc">
                        <input type="checkbox" name="selectAll">
                        </th>
                        <th aria-label="Rendering engine: activate to sort column descending" aria-sort="ascending" style="width: 292px;" colspan="1" rowspan="1" aria-controls="datatable1" tabindex="0" role="columnheader" class="sorting_asc">id</th>
                        <th aria-label="Browser: activate to sort column ascending" style="width: 375px;" colspan="1" rowspan="1" aria-controls="datatable1" tabindex="0" role="columnheader" class="sorting">标题</th>
                        <th aria-label="Platform(s): activate to sort column ascending" style="width: 352px;" colspan="1" rowspan="1" aria-controls="datatable1" tabindex="0" role="columnheader" class="hidden-xs sorting">内容</th>
                        <th aria-label="Engine version: activate to sort column ascending" style="width: 247px;" colspan="1" rowspan="1" aria-controls="datatable1" tabindex="0" role="columnheader" class="sorting">logo</th>
                        <th aria-label="Engine version: activate to sort column ascending" style="width: 247px;" colspan="1" rowspan="1" aria-controls="datatable1" tabindex="0" role="columnheader" class="sorting">类型</th>
                        <th aria-label="Platform(s): activate to sort column ascending" style="width: 352px;" colspan="1" rowspan="1" aria-controls="datatable1" tabindex="0" role="columnheader" class="hidden-xs sorting">状态</th>
                        <th aria-label="Platform(s): activate to sort column ascending" style="width: 352px;" colspan="1" rowspan="1" aria-controls="datatable1" tabindex="0" role="columnheader" class="hidden-xs sorting">发布时间</th>
                        <th aria-label="CSS grade: activate to sort column ascending" style="width: 189px;" colspan="1" rowspan="1" aria-controls="datatable1" tabindex="0" role="columnheader" class="hidden-xs sorting">操作</th>
                    </tr>
                </thead>


                <tbody aria-relevant="all" aria-live="polite" role="alert">
                    <?php foreach($show['content'] as $r):?>
                      <tr class="gradeA odd" tid="<?php echo $r['id']?>">
                            <td filed='id' class="sorting_1"><input name="diff" type="checkbox" value="<?php echo $r['id']?>"></td>
                            <td filed='id' class="sorting_1"><?php echo $r['id']?></td>
                            <td filed='title' class="text"><?php echo $r['title']?></td>
                            <td filed='content' class="hidden-xs text"><?php echo mb_substr($r['content'],0,28,'utf-8');?></td>
                            <td filed='title'>
                            <?php if($r['thumb_img']):?>
                                <img height="50" width="50" src="<?php echo $r['thumb_img']?>">
                            <?php else:?>
                                暂无图片
                            <?php endif;?>
                            </td>
                            <td filed='type' value="<?php echo $r['cid']?>" class="center"><?php echo $r['name'];?></td>
                            <td class="center "><button statue="<?php echo $r['statue'];?>" type="button" class="btn <?php echo $r['statue']==1?'btn-success':'btn-danger'; ?>"><i class="fa <?php echo $r['statue']==1?'fa-check':'fa-times'; ?>"></i></button></td>
                            <td class="center "><?php echo date('Y-m-d H:i:s',$r['createtime']);?></td>
                            <td width="250" class="center hidden-xs">
                            <a class="btn btn-default" href="<?php U('admin/news/update',array('id'=>$r['id']));?>"><i class="fa  fa-pencil"></i><span>修改</span></a>
                            <a class="btn btn-default" href="<?php U('admin/news/del',array('id'=>$r['id']))?>"  onclick="return confirm('是否要删除');"><i class="fa fa-trash-o"></i> 删除</a></td>
                      </tr>
                    <?php endforeach; ?>
                </tbody>
              </table>

              <div class="row">
                  <div class="col-sm-12">
                      <div class="pull-left">
                            <div id="datatable1_info" class="dataTables_info">Showing 1 to 10 of 57 entries</div>
                      </div>
                      <div class="pull-right">
                            <div id="datatable1_paginate" class="dataTables_paginate paging_bs_full">

                                <ul class="pagination">
                                       <?php echo $show['pagestring'];?>
                                </ul>
                            </div>
                      </div>
                      <div class="clearfix"></div>
                  </div>
              </div>

              </div>
          </div>
      </div>
      <!-- /BOX -->
</div>


<script src="public/admin/js/jquery/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    //ajax无刷新翻页
    $('.pagination').on('click','li',function(){
        var url=$(this).find('a').attr('href');
        var select=$('input[name=selectAll]').prop('checked')==true?'checked':'';
        $.ajax({
           type:'get',
           url:url,
           dataType:'json',
           data:{flag:'page'},
           success:function(res){
             if(res){
                  var string='';
                  var list = res.content;
                  var page=res.pagestring;
                  var str="'是否要删除'";

               for (i in list) {
                       string+='<tr class="gradeA odd" tid="'+list[i].id+'">';

                       string+='<td filed="id" class="sorting_1 text"><input type="checkbox" '+select+' name="diff" value="'+list[i].id+'"></td>';
                       string+='<td filed="id" class="sorting_1">'+list[i].id+'</td>';
                       string+='<td filed="title" class="text">'+list[i].title+'</td>';
                       string+='<td filed="content" class="hidden-xs text">'+(list[i].content.substr(0,10))+'</td>';
                       if(list[i].thumb_img){
                       string+='<td filed="title"><img height="50" width="50" src="'+list[i].thumb_img+'"></td>';
                       }else{
                       string+='<td filed="title">暂无图片</td>';
                       }

                       string+='<td filed="type" value="'+list[i].cid+'" class="center">'+list[i].name+'</td>';
                       string+='<td class="center ">';
                       string+='<button statue="'+list[i].statue+'" type="button" class="btn '+(list[i].statue==0?"btn-danger":"btn-success")+'"><i class="fa '+(list[i].statue==0?"fa-times":"fa-check")+'"></i></button>';
                       string+='</td>';
                       string+='<td class="center ">'+(new Date(list[i].createtime*1000).toLocaleDateString())+'</td>';
                       string+='<td width="250" class="center hidden-xs"><a class="btn btn-default" href="index.php?mod=admin&c=news&a=update&id='+list[i].id+'"><i class="fa fa-pencil"></i> <span>修改</span></a><a class="btn btn-default" href=""  onclick="return confirm('+str+');"><i class="fa fa-trash-o"></i>删除</a></td>';

                       string+='</tr>';
                     }


                    $('.pagination').html(page);
                    $('#datatable1 tbody').html(string);

             }
           }

        });
      return false;
    });



      //双击编辑内容
      $('tbody').on('dblclick','.text',function(){
        var text=$(this).text();
        var input='<input type="text" value="'+text+'">';
        $(this).html(input);
          $(this).find('input').focus();


        $(this).find('input').blur(function(){
            var value=$(this).val();
            var id=$(this).parent().siblings('td:first').find('input[name=diff]').val();
            var filed=$(this).parent().attr('filed');
            $(this).parent().text(value);


             if(value==text){
                return false;
             }

            $.ajax({
                type:'post',
                url:'index.php?mod=admin&c=news&a=update&id='+id,
                data:{'filed':filed,'val':value,'flag':-1},
                success:function(res){
                      if(res>0){
                          alert('修改成功');
                      }else{
                        alert('修改失败');
                      }
                }

            });

        });
      });



      //修改状态
      $('tbody').on('click','button',function(){
        var statue=$(this).attr('statue');
        if(statue==0){
              statue=1;
        }else{
              statue=0;
        }
        var id=$(this).parent().siblings('td:first').find('input[name=diff]').val();
          var but=$(this);
          $(this).attr('statue',statue);

        $.ajax({
             type:'post',
             url:'index.php?mod=admin&c=news&a=update&id='+id,
             data:{'statue':statue,'flag':0},
             success:function(res){
                 if(res>0){
                    if(statue==0){
                        but.removeClass('btn-success');
                        but.addClass('btn-danger');
                        but.find('i').removeClass('fa-check');
                        but.find('i').addClass('fa-times');
                    }else{
                        but.removeClass('btn-danger');
                        but.addClass('btn-success');
                        but.find('i').removeClass('fa-times');
                        but.find('i').addClass('fa-check');
                    }


                 }
             }

        });
      });




    // 全选
    $('input[name=selectAll]').click(function(){
       var condition=$(this).prop('checked');
       if(condition==true){
            $('input[name=diff]').prop('checked',true);
       }else{
            $('input[name=diff]').prop('checked',false);
       }
    });




    //批量删除和批量审核
    $('.diff').click(function(){

              //获得当前执行的操作  1代表批量删除  2代表批量审核
              var action=$('select[name=batch]').val();
              var arr=new Array();


              //循环得出当前被选中复选框的val值，并且存在arr数组中
              $('input[name=diff]:checked').each(function(k,v){
                     arr[k]=$(this).val();
              });

              if(action=='1'){
                     $.ajax({
                        type:'get',
                        data:{id:arr},
                        url:'index.php?mod=admin&c=news&a=ajax&flag=del',
                        success:function(res){
                              if(res>0){
                                for(i in arr){
                                  $('tr[tid="'+arr[i]+'"]').remove();
                                }

                                alert('删除成功');
                              }else{
                                alert('删除失败');
                              }
                        }
                     });
              }else{
                     $.ajax({
                      type:'get',
                      data:{id:arr},
                      dataType:'json',
                      url:'index.php?mod=admin&c=news&a=list&flag=look',
                      success:function(res){
                           if(res!=''){

                            for(i in res){
                              $('tr[tid="'+i+'"]').find('button[type=button]').removeClass('btn-danger');
                                $('tr[tid="'+i+'"]').find('button[type=button]').addClass('btn-success');
                                $('tr[tid="'+i+'"]').find('button[type=button]').find('i').removeClass('fa-times');
                                $('tr[tid="'+i+'"]').find('button[type=button]').find('i').addClass('fa-check');
                            }


                           }
                      }

                     });
              }

    });



    //动态添加一行tr标签，一次只能添加一行
     $('#datatable1_filter').on('click','.addtr',function(){
             var len=$('.addtr').length;
             if(len<2){
                    var string='';
                    string+='<tr class="gradeA odd addtr" tid="">';
                    string+='<td filed="id" class="sorting_1"><input type="checkbox" name="diff" value=""></td>';
                    string+='<td filed="id" class="sorting_1"></td>';
                    string+='<td filed="title"><input name="title" type="text" class="form-control"></td>';
                    string+='<td filed="content" class="hidden-xs text"><textarea name="content" class="form-control"></textarea></td>';
                    string+='<td filed="title"><img height="50" width="50" src=""></td>';
                    string+='<td class="center ">';
                    string+='<select class="form-control"  name="type"><option selected="selected">请选择</option></select>';
                    string+='</td>';
                    string+='<td class="center ">';
                    string+='<select class="form-control" name="statue"><option selected="selected" value="0">未通过</option><option value="1">通过</option></select> ';
                    string+='</td>';
                    string+='<td class="center"></td>';

                    string+='<td width="250" class="center hidden-xs"><a class="btn btn-default save"><i class="fa fa-pencil"></i> 保存</a> <a class="btn btn-default" href=""  "><i class="fa fa-trash-o"></i>取消</a></td>';
                    string+='</tr>';

                    $('tbody').prepend(string);

                    $.ajax({
                      type:'get',
                      url:'index.php?mod=admin&c=news&a=ajax',
                      dataType:'json',
                      data:{flag:'addtr'},
                      success:function(res){
                          if(res!=''){
                             var html='';
                             for(i in res){
                             html+='<option value="'+res[i].id+'">'+res[i].name+'</option>';
                              }
                               $('select[name=type]:first').append(html);

                          }
                      }
                    });
            }else{
              alert('请保存再添加！');
            }

     });


  var cateid;
  // 点击加载分类
  $('tbody').on('change','select[name=type]',function(){
     cateid=$(this).val();
    var obj=$(this).parent();
    $(this).nextAll().remove();
    if($(this).get(0).selectedIndex==0){
          return false;
    }

    $.ajax({
      type:'get',
      url:'index.php?mod=admin&c=news&a=ajax&flag=cate&id='+cateid,
      dataType:'json',
      success:function(res){
              if(res!=""){
                    var html='';
                    html+='<select name="type" class="form-control">';
                    html+='<option value='+cateid+'>上级分类</option>';
                    for(i in res){
                    html+='<option value='+res[i].id+'>'+res[i].name+'</option>';
                    }
                    html+='</select>';

                    obj.append(html);
              }
      }

    });

  });

   //点击保存
   $('tbody').on('click','.save',function(){
     var title=$(this).parent().siblings().find('input[name=title]').val();
     var content=$(this).parent().siblings().find('textarea[name=content]').val();
     var statue=$(this).parent().siblings().find('select[name=statue]').val();
     var type=$(this).parent().siblings().find('select[name=type]').val();
     $.ajax({
      type:'post',
      url:'index.php?mod=admin&c=news&a=ajax&flag=add',
      data:{'title':title,'content':content,'statue':statue,'cid':type},
      success:function(res){

        if(res>0){
             alert('添加成功');location.reload();
        }else{
             alert('添加失败');
        }

      }
     });


   });


  //点击编辑分类
   $('tbody').on('dblclick','td[filed=type]',function(){
        if($(this).parent().parent().find('.xg').length>0){
          alert('请保存再修改');
          return false;
      }

      var cid=$(this).attr('value');

      var obj=$(this);



      var obj=$(this);

      $.ajax({
          type:'get',
          url:'index.php?mod=admin&c=news&a=ajax&flag=catelist&id='+cid,
          dataType:'json',
          success:function(res){

               if(res!=''){
                var html='';
                for(i in res){
                  var tmp=res[i];
                    html+='<select name="type" class="form-control">';


                    for(j in tmp){
                    if(j==0){
                    html+='<option  value='+tmp[j].pid+'>上级分类</option>';
                    }
                      var select=i==tmp[j].id?'selected':'';
                      html+='<option '+select+' value='+tmp[j].id+'>'+tmp[j].name+'</option>';
                    }
                    html+='</select>';


                  obj.html(html);
                  obj.siblings().find('a:first').addClass('xg');
                  obj.siblings().find('.xg span').text('保存');
                  obj.siblings().find('.xg').attr('href','');
               }


                              for(i in res){
                                var tmp=res[i];
                                html+='<select name="pid" style="float:left;margin-left:10px;width:120px;" class="form-control">';

                                html+='<option value='+cid+'>上级分类</option>';
                                for(j in tmp){
                                var selected=i==tmp[j].id?'selected':'';
                                html+='<option '+selected+' value='+tmp[j].id+'>'+tmp[j].name+'</option>';
                                }

                                html+='</select>';
                                }
                                obj.html(html);
                    }

          }
      });

   });



   $('tbody').on('click','.xg',function(){
      var select = $(this).parent().siblings('td[filed=type]').find('select');
      var valid=select.eq(select.length-1).val();
      var id=$(this).parent().siblings('td:first').find('input').val();
      $.ajax({
        type:'get',
        url:'index.php?mod=admin&c=news&a=ajax&flag=updatecid&cid='+valid+'&id='+id,
        success:function(res){
          if(res>0){
             alert('修改成功');
             location.reload();
          }

        }
      });
      return false;
   });



});



</script>
